<template>
  <div class="falls" ref="refFalls">
    <div>
      <span 
        :class="[Math.abs(lightIndex1 - n) <=1  ? 'light' : 0]" 
        v-for="n in count" :key="n">
        {{n%2 == 0?0:1}}
      </span>
    </div>
    <div>
      <span 
        :class="[Math.abs(lightIndex2 - n) <=1 ? 'light' : 0]" 
        v-for="n in count" :key="n">
        {{n%2 == 0?1:0}}
      </span>
    </div>
    <div>
      <span 
        :class="[Math.abs(lightIndex3 - n) <=1  ? 'light' : 0]" 
        v-for="n in count" :key="n">
        {{n%2 == 0?0:1}}
      </span>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue"
const count = ref(0)
const lightIndex1 = ref(1)
const lightIndex2 = ref(1)
const lightIndex3 = ref(1)
const refFalls = ref(null)
let timer1;
let timer2;
let timer3;
onMounted(() => {
  let height = refFalls.value.offsetHeight
  count.value = Math.floor(height / 20)
  timer1 = setInterval(() => {
    if (lightIndex3.value == count.value - 1) {
      lightIndex3.value = 1
    } else {
      lightIndex3.value++
    }
  }, 200)

  setTimeout(() => {
    timer2 = setInterval(() => {
      if (lightIndex2.value == count.value - 1) {
        lightIndex2.value = 1
      } else {
        lightIndex2.value++
      }
    }, 200)
  }, 600);

  setTimeout(() => {
    timer3 = setInterval(() => {
      if (lightIndex1.value == count.value - 1) {
        lightIndex1.value = 1
      } else {
        lightIndex1.value++
      }
    }, 200)
  }, 200);
})

onBeforeUnmount(()=>{
  if(timer1!== undefined)clearInterval(timer1);
  if(timer2!== undefined)clearInterval(timer2);
  if(timer3!== undefined)clearInterval(timer3);
})
</script>
<style scoped>
.falls {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.1);
  width: 35px;
  display: flex;
}
.falls > div {
  width: 33.3%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column-reverse;
}
.falls span {
  display: inline-block;
  width: 100%;
  height: 20px;
}
.falls span.light {
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5),
    0 0 20px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 255, 255, 0.3),
    0 0 40px rgba(255, 255, 255, 0.2);
}
</style>
